<template>
  <div class="content">
    <!--销售员列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="title1"
      model
      :visible.sync="ismarketlDialog"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <span class="materiel-code">{{ $t('shop.name1') }}<!--销售员名称--></span>
        <el-input v-model.trim="market.fname" class="input-width" size="mini" @keyup.enter.native="marketSearch" />
        <el-button size="mini" type="primary" @click="marketSearch">{{ $t('btn.search') }}</el-button>
        <el-button v-if="selectCheck" size="mini" type="primary" @click="confirmArr">{{ $t('btn.confirm') }}</el-button>
      </div>
      <jc-table
        :table-data="marketDialogData"
        :table-header="marketDialogHeader"
        table-height="53vh"
        serial
        :table-selection="selectCheck"
        @clickRow="marketlSelectRow"
        @selectionChange="handleSelectAll"
      />
      <jc-pagination
        v-show="market.total > 0"
        :total="market.total"
        :page.sync="market.pageNum"
        :limit.sync="market.pageSize"
        @pagination="querySalesperson"
      />
    </el-dialog>
  </div>
</template>
<script>
import { querySalesperson } from '@/api/marketManage/marketOrder'

export default {
  props: {
    staffType: {
      type: Number,
      default: 1
    },
    selectCheck: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title1: '',
      // 销售员分页
      market: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 200, // 每页显示多少条数据
        fname: ''
      },
      ismarketlDialog: true,
      marketDialogData: [],
      marketDialogHeader: [
        { label: this.$t('shop.type'), prop: 'staffName' },
        { label: this.$t('shop.name1'), prop: 'fuserName' },
        { label: this.$t('market.deaprt'), prop: 'deptName' }
      ],
      prodValue: { fsalerIdName: '', fsalerId: '', ismarketlDialog: true }
    }
  },
  created() {
    if (this.staffType === 1) {
      this.title1 = this.$t('market.ListSalesmen')
    } else if (this.staffType === 2) {
      this.title1 = this.$t('market.staff')
    } else if (this.staffType === 3) {
      this.title1 = this.$t('market.stocker')
    }
    this.querySalesperson()
  },
  methods: {
    // 查询销售员
    async querySalesperson() {
      this.ismarketlDialog = true
      const DATA = {
        staffType: this.staffType, // 销售员
        ...this.market
      }
      const { data: RES } = await querySalesperson(DATA)
      this.marketDialogData = RES.list
      this.market.total = RES.total
    },
    // 多选
    handleSelectAll(val) {
      this.selectVal = []
      this.selectVal1 = []
      val.forEach(item => {
        this.selectVal1.push(item.fuserId)
        this.selectVal.push(item.fuserName)
      })
    }, // 确定
    confirmArr() {
      this.$emit('market', this.selectVal, this.selectVal1)
    },
    marketSearch() {
      this.market.pageNum = 1
      this.querySalesperson()
    },
    // 选择销售员
    marketlSelectRow(item) {
      this.$emit('market', item)
    },
    // 关闭前回调
    handleClose() {
      this.prodValue.ismarketlDialog = false
      this.$emit('market', this.prodValue)
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  @include listBom;
}
</style>

